.avatar {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;

  .image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 0.6s;
    height: 100%;
    border-radius: 50%;
    width: 100%;
  }
}

.avatar-wrap {
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;

  &.shadow {
    border: 3px #bbb solid;
    box-shadow: 1px 2px 9px 0 rgb(0 0 0 / 32%);
  }

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
